<!DOCTYPE html>
<html>
<head>
    <title>Highcharts示例</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <div id="container"></div>
    <br>
    <div style="display: block;color: #000;">test</div>
    <script>
        Highcharts.chart('container', {
            chart: {
                type: 'column' // 图表类型
            },
            title: {
                text: '2024年季度销售额' // 主标题
            },
            subtitle: {
                text: '单位：万元' // 副标题
            },
            xAxis: {
                categories: ['Q1', 'Q2', 'Q3', 'Q4'], // X轴分类
                crosshair: true // 十字准线
            },
            yAxis: {
                title: {
                    text: '销售额'
                }
            },
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true // 显示数据标签
                    },
                    enableMouseTracking: false // 启用鼠标悬停
                }
            },
            series: [{
                name: '线上渠道',
                data: [120, 135, 150, 180] // 数据数组
            }, {
                name: '线下渠道',
                data: [80, 95, 110, 130]
            }, {
                name: '电话渠道',
                data: [90, 75, 120, 200]
            }]
        });
    </script>
</body>
</html>